<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="time" label="时间">
				<template #default="scope">
					<div class="pt-10px pb-10px flex items-center">
						<span class="text-[#000000] text-[14px] font-[400]">{{ scope.row.time }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="coin" label="合约">
				<template #default="scope">
					<div class="pt-10px pb-10px">
						<p class="text-[#000000] text-[14px] font-[300] mb-4px">{{ scope.row.coin }}</p>
						<p class="text-#114CEE text-12px bg-#E9F2FF rounded-4px w-36px text-center box-border">
							{{ scope.row.contract }}
						</p>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="methods" label="类型">
			</el-table-column>
			<el-table-column prop="to" label="方向">

				<template #default="scope">
					<div class="pt-10px pb-10px" :class="{ 'text-#07B175': scope.row.to, 'text-#F34E5F': !scope.row.to }">
						{{ (scope.row.to ? '开多' : '开空') }}
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="price" label="价格">
			</el-table-column>
			<el-table-column prop="sum" label="数量">
			</el-table-column>
			<el-table-column prop="sumTrade" label="成交数量">
			</el-table-column>
			<el-table-column prop="triggerPrice" label="触发条件">
				<template #default="scope">
					<div>
						<div v-if="scope.row.triggerMethods">
							<p>{{ scope.row.triggerMethods }}</p>
							<p>{{ scope.row.triggerPrice }}</p>
						</div>
						<div v-else>
							<p>--/--</p>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="address" label="操作" align="right">
				<template #header>
					<div class="text-#3E5BF2">
						全撤
					</div>
				</template>
				<template #default="scope">
					<div class="text-16px text-#3E5BF2">
						<el-icon>
							<Delete />
						</el-icon>
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const tableData = ref<any[]>([
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: false,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00'
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '',
		triggerPrice: ''
	},
	{
		time: '2023-04-02 12:00:01',
		coin: 'BTC/USDT',
		contract: '永续',
		methods: '限价委托',
		to: true,
		price: '1.0000',
		sum: '0.00 USDT',
		sumTrade: '0.000 USDT',
		triggerMethods: '标记价格',
		triggerPrice: '<=98,000.00'
	}
])

</script>

